<template>
  <div class="schedule-container">
    <!-- 头部说明 -->
    <div class="header">
      <div class="notice-wrap">
        <div class="left">
          <image
            :src="
              baseHttp + '/image/getByImageId?imageId=' +
              room.images
            "
          />
        </div>
        <div class="right">
          <div class="title-wrap">
            <div class="title">{{ room.name }}【{{ room.type }}】</div>
            <div class="status">空闲中</div>
          </div>
          <div class="notice-desc-wrap">
            <div class="title">预定须知：</div>
            <div class="use-desc">使用教程 ></div>
          </div>
          <div class="detail-desc">
            预定成功后，请按预约时间及时确认到店消费，若无法到店消费，可自主取消订单；预约时间到期前，可以自主续单延时，请提前规划好预约时段。
          </div>
        </div>
      </div>
    </div>
    <!-- 预定类别内容选择 -->
    <div class="body">
      <div class="schedule-mode-wrap">
        <div class="category">
          <div
            :class="['item', curIndex === index ? 'actived' : '']"
            v-for="(item, index) in category"
            :key="item.type"
            @click="onSelectMode(index)"
          >
            {{ item.text }}
          </div>
        </div>
        <div class="category-detail">
          <div class="select-warp">
            <div class="date-picker">
              <div
                :class="['date-item', curDateIndex === index ? 'actived' : '']"
                v-for="(item, index) in dateList"
                :key="index"
                @click="onSelectDate(index)"
              >
                <div class="date">{{ item.date }}</div>
                <div class="week">{{ item.week }}</div>
              </div>
            </div>
            <div class="hour-picker">
              <div class="label">时长选择:</div>
              <div class="hour-wrap">
                <div
                  :class="[
                    'hour-item',
                    curHourIndex === index ? 'actived' : '',
                  ]"
                  v-for="(item, index) in hourList"
                  :key="index"
                  @click="onSelectHour(index)"
                >
                  {{ item.text }}
                </div>
              </div>
            </div>
            <div class="time-picker">
              <div class="label">时间选择:</div>
              <div class="time-wrap">
                <div class="time-item">{{ curTime }}</div>
                <div style="flex: 1; text-align: center">到</div>
                <div class="time-item">{{ fetureTime }}</div>
              </div>
            </div>
          </div>
          <div class="confirm-tip">
            根据行业政策，您可以在订单开始前1小时自主取消订单若无法到店，订单将正第计费并无法申请退款，请合理安
            排预约时段。
          </div>
        </div>
      </div>
      <div class="spare-time-wrap">
        <div class="spare-time">
          <div class="top">
            <div
              class="block-item"
              v-for="(item, index) in spareTimeDesc"
              :key="index"
            >
              <div class="block" :style="{ background: item.color }"></div>
              <div>{{ item.text }}</div>
            </div>
          </div>
          <div class="middle">
            <div
              class="spare-time-map"
              v-for="item in spareTimeStatus"
              :key="item.date"
            >
              <div class="date">{{ item.date }}</div>
              <div class="map-wrap">
                <div class="map" v-for="items in 24" :key="items">
                  <div
                    :class="[
                      'block',
                      item.curSelectTime.includes(items) ? 'aaaa' : '',
                    ]"
                    :style="{
                      background: item.curSelectTime.includes(items)
                        ? item.curColor
                        : '' || item.selectableTime.includes(items)
                        ? item.selectColor
                        : '' || item.disableTime.includes(items)
                        ? item.disableColor
                        : '',
                    }"
                  ></div>
                  <div class="number">{{ items }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="order-detail-wrap">
        <div class="order-detail-top">
          <div class="title-wrap">
            <div class="title">订单总价</div>
            <div class="sub-title">80</div>
          </div>
          <div class="order-detail-body">
            <div class="item">
              <div class="hour">预约时长</div>
              <div class="hour">5小时</div>
            </div>
            <div class="item">
              <div class="price">包厢单价</div>
              <div class="hour">20元/小时</div>
            </div>
            <div class="item">
              <div class="vip-price">会员特价</div>
              <div class="hour">16元/小时</div>
            </div>
          </div>
        </div>
        <div class="order-detail-bottom">
          <div class="item-wrap">
            <div class="left">
              <div class="icon-wrap">
                <image :src="require('@/static/schedule/tuangou.png')" />
              </div>
              <div class="text">团购券</div>
            </div>
            <div class="right">
              <div class="value">暂无可用团购券</div>
            </div>
          </div>
          <div class="item-wrap">
            <div class="left">
              <div class="icon-wrap">
                <image :src="require('@/static/schedule/youhuiquan.png')" />
              </div>
              <div class="text">优惠券</div>
            </div>
            <div class="right">
              <div class="value">暂无可用团购券</div>
            </div>
          </div>
          <div class="item-wrap">
            <div class="left">
              <div class="icon-wrap">
                <image :src="require('@/static/schedule/yue.png')" />
              </div>
              <div class="text">账户余额({{ money }})</div>
            </div>
            <div class="right">
              <div class="money-tip" v-show="money <= 0">余额不足，请充值</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部按钮 -->
    <div class="footer">
      <div class="order-total-wrap">
        <div class="left">
          <div class="total-price">
            总计： <span class="money-wrap">80</span>
          </div>
          <div class="total-hour">共5个小时</div>
        </div>
        <div class="right">
          <div class="recharge">
            <div>余额充值</div>
            <div>(享优惠)</div>
          </div>
          <div class="confirm">确定预约</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import util from "@/libs/util.js";
import globalConfig from "@/config";
const baseHttp = globalConfig.API_HOST

export default {
  name: "Schedule",
  data() {
    return {
      // 茶室基本信息
      room: {
        name: "V888",
        type: "特惠包",
        images: "fef52a0d-c82d-4f2d-a79c-40ad09413715",
      },
      baseHttp: baseHttp,
      // 当前模式索引,默认小时模式
      curIndex: 0,
      // 模式选择
      category: [
        {
          text: "小时模式",
          type: "hour",
        },
        {
          text: "套餐模式",
          type: "combo",
        },
      ],
      // 当前日期索引,默认今天
      curDateIndex: 0,
      // 当前时长索引,默认4小时
      curHourIndex: 0,
      hourList: [
        {
          text: "4小时",
          hour: 4,
        },
        {
          text: "5小时",
          hour: 5,
        },
        {
          text: "8小时",
          hour: 8,
        },
        {
          text: "其它",
          hour: 0,
        },
      ],
      // 当前选择的时长
      hour: 0,
      // 当前时间列表
      curTime: "00:00",
      fetureTime: "00:00",
      // 时段说明
      spareTimeDesc: [
        {
          text: "当前选择时段",
          color: "#1D2C6D",
        },
        {
          text: "可选时段",
          color: "#fff",
        },
        {
          text: "不可选时段",
          color: "#ffeb3b",
        },
      ],
      // 时段状态
      spareTimeStatus: [
        {
          date: "2023-04-21",
          curSelectTime: [0, 1, 2, 3, 4, 5, 6, 7, 8],
          selectableTime: [9, 16],
          disableTime: [18, 19, 20, 21, 22, 23],
          curColor: "#1D2C6D",
          selectColor: "#fff",
          disableColor: "#ffeb3b",
        },
        {
          date: "2023-04-22",
          curSelectTime: [17, 18, 19, 20],
          selectableTime: [21, 22, 23],
          disableTime: [
            0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,
          ],
          curColor: "#1D2C6D",
          selectColor: "#fff",
          disableColor: "#ffeb3b",
        },
      ],
      // 余额
      money: 0,
    };
  },
  computed: {
    dateList() {
      return util?.getFetureDay?.(5);
    },
  },
  watch: {
    hour: {
      immediate: true,
      handler(h) {
        const { curTime, fetureTime } = util?.getFetureHour?.(h);
        this.curTime = curTime;
        this.fetureTime = fetureTime;
      },
    },
  },
  mounted() {},
  methods: {
    // 选择模式
    onSelectMode(index) {
      this.curIndex = index;
    },
    // 选择日期
    onSelectDate(index) {
      this.curDateIndex = index;
    },
    // 选择时长
    onSelectHour(index) {
      this.curHourIndex = index;
      this.hour = this.hourList[index]?.hour;
    },
  },
};
</script>

<style lang="scss" scoped>
.schedule-container {
  padding: 0 16px 80px;
  .header {
    background: #fff;
    padding: 12px;
    box-sizing: border-box;
    border-radius: 8px;
    margin-top: 20px;
    box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.1);
    .notice-wrap {
      display: flex;
      justify-content: space-between;
      height: 300rpx;
      .left {
        width: 220rpx;

        overflow: hidden;
        border-radius: 8rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .right {
        flex: 1;
        padding-left: 20rpx;
        .title-wrap,
        .notice-desc-wrap {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-bottom: 20rpx;
          .title {
            font-weight: 500;
            font-size: 14px;
          }
          .status {
            border-radius: 3px;
            border: 1px solid #f00;
            font-size: 11px;
            padding: 2px 4px;
            color: #f00;
          }
          .use-desc {
            color: #1D2C6D;
            font-size: 13px;
          }
        }
        .detail-desc {
          font-weight: 400;
          font-size: 11px;
          line-height: 1.7;
        }
      }
    }
  }
  .body {
    padding-top: 20px;
    .schedule-mode-wrap {
      border-radius: 8px;
      padding-bottom: 10px;
      overflow: hidden;
      .category {
        display: flex;
        background: #fff;
        .item {
          flex: 1;
          text-align: center;
          font-size: 16px;
          height: 32px;
          line-height: 32px;
          transition: all ease-in 0.3s;
          box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.15);
          &.actived {
            color: #fff;
            background: #1D2C6D;
          }
        }
      }
      .category-detail {
        padding: 16px 0 6px;
        border: 1px solid #1D2C6D;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        border-top-color: transparent;
        position: relative;
        background: #fff;
        box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1);
        .select-warp {
          padding: 0 12px;
        }
        .label {
          color: #333;
          font-size: 14px;
          font-weight: 500;
        }
      }
      .date-picker {
        display: flex;
        justify-content: space-between;
        .date-item {
          padding: 4px 12px;
          font-size: 12px;
          text-align: center;
          transition: all ease-in 0.2s;
          border-radius: 3px;
          border: 1px solid;
          border-color: transparent;

          &.actived {
            color: #1D2C6D;
            border-color: #1D2C6D;
            background: #e8f7e8;
          }
        }
      }
      .hour-picker {
        display: flex;
        align-items: center;
        padding-top: 16px;
        .hour-wrap {
          flex: 1;
          display: flex;
          justify-content: space-around;
          padding-left: 10px;
        }
        .hour-item {
          transition: all ease-in 0.2s;
          font-size: 12px;
          border-radius: 3px;
          padding: 4px 8px;
          border: 1px solid;
          border-color: #ddd;
          &.actived {
            color: #1D2C6D;
            border-color: #1D2C6D;
          }
        }
      }
      .time-picker {
        display: flex;
        align-items: center;
        padding: 16px 0;
        .time-wrap {
          flex: 1;
          display: flex;
          justify-content: space-around;
          align-items: center;
          padding-left: 10px;
          .time-item {
            flex: 2;
            text-align: center;
            padding: 4px 0;
            border: 1px solid;
            border-color: #ddd;
            border-radius: 20px;
          }
        }
      }
      .confirm-tip {
        font-size: 12px;
        font-weight: 300;
        padding: 6px 6px 0;
        border-top: 1px solid #b7d8b9;
        line-height: 1.5;
      }
    }
    .spare-time-wrap {
      padding-bottom: 10px;
      overflow: hidden;
      .spare-time {
        border-radius: 8px;
        background: #fff;
        padding: 0 12px;
      }
      .block {
        width: 12px;
        height: 12px;
        background: #1D2C6D;
        border-radius: 2px;
        margin-right: 4px;
        border: 1px solid #ddd;
      }
      .top {
        display: flex;
        justify-content: space-between;
        font-size: 13px;
        padding: 18px 18px 0;
      }
      .block-item {
        display: flex;
        align-items: center;
      }
      .middle {
        padding-top: 12px;
        .block {
          width: 10px;
          height: 10px;
          margin-right: 0;
          background: #fff;
        }
        .spare-time-map {
          padding-bottom: 12px;
        }
        .date {
          color: #333;
          font-size: 11px;
          font-weight: 300;
          padding-bottom: 2px;
        }
        .map {
          flex: 1;
          text-align: center;
        }
        .map-wrap {
          display: flex;
          justify-content: space-between;
        }
        .number {
          font-size: 9px;
          font-weight: 400;
          color: #000;
        }
      }
    }
    .order-detail-wrap {
      border-radius: 8px;
      padding: 0 12px 10px;
      background: #fff;
      overflow: hidden;
      position: relative;
      &::before {
        content: "";
        display: inline-block;
        position: absolute;
        top: 50%;
        left: -9px;
        background: #f5f5f5;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        margin-top: 9px;
        transform: translateY(-50%);
      }
      &::after {
        content: "";
        display: inline-block;
        position: absolute;
        top: 50%;
        right: -9px;
        background: #f5f5f5;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        margin-top: 9px;
        transform: translateY(-50%);
      }
      .order-detail-bottom {
        padding-top: 12px;
        border-top: 1px dashed #ddd;
      }
      .title-wrap {
        color: #333;
        font-size: 15px;
        font-weight: 500;
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid #ddd;
        .sub-title {
          color: #f00;
          &::before {
            content: "￥";
            padding-right: 2px;
          }
        }
      }
      .order-detail-body {
        padding: 8px 0 12px;
        .item {
          display: flex;
          justify-content: space-between;
          padding-bottom: 8px;
          font-weight: 300;
          font-size: 13px;
        }
      }
      .item-wrap {
        display: flex;
        justify-content: space-between;
        padding-bottom: 10px;
        .icon-wrap {
          background: #1D2C6D;
          padding: 2px;
          border-radius: 2px;
          display: flex;
          justify-content: center;
          align-items: center;
          image {
            width: 12px;
            height: 12px;
          }
        }
        .left {
          display: flex;
          align-items: center;
          .text {
            color: #000;
            font-size: 14px;
            font-weight: 300;
            padding-left: 6px;
          }
        }
        .right {
          .value {
            font-size: 11px;
            font-weight: 400;
            padding-left: 6px;
            color: #1D2C6D;
            background: #e3f3e4;
            border-radius: 12px;
            padding: 2px 6px;
            &::after {
              content: ">";
              padding-left: 4px;
            }
          }
          .money-tip {
            color: #f00;
            font-size: 11px;
            font-weight: 400;
          }
        }
      }
    }
  }
  .footer {
    width: 100%;
    background: #f5f5f5;
    position: fixed;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    padding: 10px 12px 20px;
    .order-total-wrap {
      background: #fff;
      display: flex;
      align-items: center;
      height: 46px;
      border-radius: 46px;
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      .left {
        flex: 1;
        font-size: 11px;
        padding-left: 23px;
        .money-wrap {
          font-size: 13px;
          color: #f00;
          &::before {
            content: "￥";
            font-size: 10px;
          }
        }
      }
      .right {
        display: flex;
        font-size: 13px;
        font-weight: 500;
        height: 100%;
        .recharge {
          background: #f5f5f5;
          color: #1D2C6D;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 0 10px;
        }
        .confirm {
          color: #fff;
          background: #1D2C6D;
          display: flex;
          align-items: center;
          padding: 0 10px;
        }
      }
    }
  }
}
</style>
